<template>
	<view>
		<!-- 导航栏 -->
		<view class="box-nav">
			<view class="head-wrapper" id="home" :style="{ top: homeTop + 'rpx' }">
				<view class="head-menu">
					<view class='iconfont icon-fanhui2' @click="returns"></view>
					<view class="iconfont icon-shouye" @click="showNav"></view>
				</view>
				<view class="fw fs-36 mlr " style="margin-right: 43%;">
					<view class="box-title-txt">
						<text style="color: #0808D8;">{{options.title || '详情'}}</text>
						<text>{{options.tag || '页面'}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- end -->

		<view style="height: 200rpx;"></view>

		<!-- 列表页面 -->
		<view>
			<view v-for="(item,index) in dataList" :key="index" class="box-card-list bb p-20">
				<view class="fw fs-34">
					<text>{{item.title || ''}}</text>
				</view>
				<view v-if="item.describe" class="mt-10 line-3">
					<text class="fs-26" style="color: #707070;">{{item.describe || ''}}</text>
				</view>
				<view class="mt-20 pos-r">

					<view v-if="item.video " @click="playVideo(item,index)">
						<view v-if="index != currentVideo">
							<image class="br-12"
								:src="$timer.ensureUrl(item.cover) || 'https://yjgs.jsonbug.com/storage/default/20241108/20241109164114.jpg'"
								mode="aspectFill" style="height: 380rpx;width: 100%;"></image>
							<image src="https://yjgs.jsonbug.com/storage/default/20241108/video_play_icon.png"
								style="width: 96rpx;height: 96rpx;left: 50%;top: 50%;transform:translate(-50%,-50%)"
								class="br-100p pos-a"></image>
						</view>
						<video autoplay :poster='$timer.ensureUrl(item.cover)' :id="'video-'+item.id"
							v-if="index == currentVideo" style="height: 380rpx;width: 100%;border-radius: 12rpx;"
							:src="$timer.ensureUrl(item.video)">
						</video>
					</view>

					<swiper v-else :autoplay='true' :indicator-dots="$timer.strToArr(item.carousel_images).length > 1"
						style="height: 380rpx;">
						<swiper-item @click="preViewClick(item,_index)"
							v-for="(cur, _index) in $timer.strToArr($timer.ensureUrl(item.carousel_images))"
							:key="_index">
							<image :src="cur" style="width: 100%;height: 380rpx;border-radius: 12rpx;"></image>
						</swiper-item>
					</swiper>

				</view>
				<view class="mt-10 flex ac sb">
					<view style="color: #707070;">
						<text>{{$timer.formatTime(item.create_time,'yyyy年mm月dd日')}}</text>
					</view>
					<button open-type="share" hover-class="none" class="protoButton">
						<view style="color: #707070;">
							<text class="iconfont-yjgs  fs-40">
								&#xe68c;
							</text>
							<text>分享</text>
						</view>
					</button>
				</view>
			</view>
		</view>
		<!-- end -->


		<!-- 打电话按钮 -->
		<view @click="callService" v-if="options.mode == 1" class="box-cf box-cf-center ">
			<text class="cf-icon iconfont icon-dianhua" />
			<text class="cf-text">我要约访</text>
		</view>
		<!-- end -->


		<!-- 加载更多 -->
		<uni-load-more :status="status" />
		<!-- end -->

	</view>
</template>

<script>
	import {
		serviceTrendList
	} from "@/api/extend.js"
	export default {
		data() {
			return {
				currentVideo: -1, //当前播放的索引
				currentType: 1,
				status: 'loading', // more loading noMore
				current_page: 1,
				homeTop: 88,
				options: {},
				dataList: [],
			}
		},
		onReachBottom() {
			if (this.status == 'noMore') return;
			this.current_page++;
			this.serviceTrendListFunc({
				type: this.currentType
			});
		},
		onLoad(options) {
			this.options = options;

			if ((options.title + options.tag) == '贵商故事') {
				this.currentType = 1
			}
			if (['企业探访', '采访探访'].includes(options.title + options.tag)) {
				this.currentType = 2
			}
			if (['平台动态', '贵商活动'].includes(options.title + options.tag)) {
				this.currentType = 3
			}

			this.serviceTrendListFunc({
				type: this.currentType
			});

		},
		// #ifdef MP
		onShareAppMessage: function() {
			let _this = this;
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: (_this.options.title + _this.options.tag) || '详情',
				path: `/pages/index/index_desc?title=${_this.options.title}&tag=${_this.options.tag}&uid=${_this.uid || -1}`,
			}
		},
		onShareTimeline: function() {
			return {
				title: (_this.options.title + _this.options.tag) || '详情',
				query: {
					key: ''
				},
				imageUrl: ''
			}
		},
		computed: {
			uid() {
				this.$store.state.app.uid
			}
		},
		// #endif
		methods: {
			callService() {
				// || this.serviceData.phone
				uni.makePhoneCall({
					phoneNumber: '4007180878',
					success: () => {
						console.log('拨打电话成功');
					},
					fail: (err) => {
						console.log('拨打电话失败', err);
					}
				});
			},
			preViewClick(item, _index) {
				if (item.to_url) {
					let param = this.$timer.getQueryParams(item.to_url)
					// 判断活动是否已结束
					uni.navigateTo({
						url: '/pages/extend/index/salon_pic?id=' + param.id
					})
					// uni.setStorageSync('webViewUrl', item.to_url);
					// uni.navigateTo({
					// 	url: item.to_url
					// })
				} else {
					this.$timer.preView(this.$timer.strToArr(item.carousel_images), _index)
				}
			},
			playVideo(item, index) {
				this.currentVideo = index;
			},
			handlePlay(tag) {
				this.dataList.forEach(item => {
					if (tag != item.id) {
						let videoContext = uni.createVideoContext(`video-${item.id}`)
						videoContext.pause();
					}
				})
			},
			serviceTrendListFunc({
				type
			}) {
				serviceTrendList({
					limit: 6,
					page: this.current_page,
					type
				}).then(res => {
					let data = res.data.data;
					this.current_page = res.data.current_page;

					if (data.length < 6) {
						this.status = 'noMore'
					} else {
						this.status = 'more'
					}

					this.dataList = [...this.dataList, ...data];
				})
			},
			// 后退
			returns() {
				uni.navigateBack({
					fail() {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
				})
			},
			// 首页
			showNav() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
		},
		onReady() {
			this.$nextTick(function() {
				// #ifdef MP
				const menuButton = uni.getMenuButtonBoundingClientRect();
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#home')
					.boundingClientRect(data => {
						this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
					})
					.exec();
				// #endif
			});
		},
	}
</script>

<style lang="scss" scoped>
	.box-cf {
		border-radius: 48rpx;
		color: #fff;
		background: linear-gradient(135deg, #3a7bd5, #00d2ff);
		z-index: 99;
		position: fixed;
		bottom: 100rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 34rpx;
		width: 56%;
		left: 50%;
		transform: translateX(-50%);
		box-shadow: 0 8rpx 32rpx rgba(52, 152, 219, 0.10), 0 1rpx 4rpx rgba(111, 231, 221, 0.08);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: box-shadow 0.2s, background 0.2s, transform 0.2s;
		cursor: pointer;
		border: 1.5rpx solid rgba(255, 255, 255, 0.18);
		backdrop-filter: blur(6rpx);
		-webkit-backdrop-filter: blur(6rpx);
		opacity: 0.98;
	}

	.box-cf:active,
	.box-cf:hover {
		box-shadow: 0 12rpx 40rpx rgba(52, 152, 219, 0.16), 0 2rpx 8rpx rgba(111, 231, 221, 0.12);
		background: linear-gradient(90deg, #3498DB 0%, #6FE7DD 100%);
		transform: translateX(-50%) scale(1.03);
	}

	.box-cf .cf-icon {
		font-size: 44rpx;
		margin-right: 16rpx;
		color: #fff;
		text-shadow: 0 2rpx 8rpx rgba(52, 152, 219, 0.18);
	}

	.box-cf .cf-text {
		font-weight: 500;
		letter-spacing: 2rpx;
		color: #fff;
		text-shadow: 0 1rpx 4rpx rgba(52, 152, 219, 0.10);
	}

	.box-cf-center {
		justify-content: center;
	}

	.protoButton {
		background: none;
		border: none;
		outline: none;
		padding: 0;
		margin: 0;
		font: inherit;
		color: inherit;
		cursor: pointer;
		text-align: center;
		text-decoration: none;
		display: inline-block;
	}

	.box-card-list {
		margin: 0rpx 20rpx;
		background-color: white;
		height: auto;
		border-radius: 10rpx;
		margin-top: 24rpx;

	}

	.box-title-txt {
		font-weight: bold;
		font-size: 36rpx;
		box-sizing: border-box;
		font-style: oblique;
	}

	.box-nav {
		z-index: 99;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: white;
		height: 200rpx;
	}

	.box-title {}

	.head-wrapper {
		width: 100%;
		z-index: 999;
		display: flex;
		align-items: center;
		position: fixed;
		left: 30rpx;
		top: 0;
	}

	.head-menu {
		display: flex;
		align-items: center;
		height: 58rpx;
		width: 158rpx;
		background: rgba(255, 255, 255, 0.302);
		border: 2rpx solid rgba(0, 0, 0, 0.0588);
		border-radius: 29rpx;

		.iconfont {
			flex: 1;
			text-align: center;
			color: #000000;
			box-sizing: border-box;

			&.icon-fanhui2 {
				border-right: 1px solid rgba(0, 0, 0, 0.2);
				;
			}
		}
	}
</style>